<template>
    <div class="container">
        <!-- 客户标签管理 -->
        <div class="custLabelManageMain">
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline formData_form_inline"
                size="small"
            >
                <el-form-item label="客户证件号">
                    <el-input v-model="formData.custId" placeholder="请输入客户证件号"></el-input>
                </el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="hanlesearch"
                    class="searchBtn"
                >查询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                    class="resetBtn"
                >重置</el-button>
            </el-form>
            <div style="margin-bottom: 16px;">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-download"
                    @click="clickImport"
                >导 入</el-button>
                <!-- <el-button
                    type="cancel"
                    size="small"
                    icon="el-icon-setting"
                    @click.stop="columnSetting"
                >列筛选</el-button>-->
            </div>
            <div v-if="columnDialogFlag" class="columnDialog">
                <el-scrollbar wrap-class="side-bar-scrollbar-wrap">
                    <div v-for="item in tableHead" :key="item.prop">
                        <el-checkbox v-model="item.flag" @change="changeChecked(item)"></el-checkbox>
                        <span style="font-size: 14px;margin-left: 4px;">{{item.label}}</span>
                    </div>
                </el-scrollbar>
                <!--<div slot="footer" class="dialog-footer">-->
                <!--<el-button @click="columnDialogFlag = false" class="cancelBtn">取 消</el-button>-->
                <!--<el-button type="primary" size="small" @click="handleSubmit" class="submitBtn"size="small" icon="el-icon-circle-check" >确定</el-button>-->
                <!--</div>-->
            </div>
            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <template v-for="(item, index) in tableHead">
                    <el-table-column
                        :key="index"
                        v-if="item.flag"
                        :label="item.label"
                        :prop="item.prop"
                    ></el-table-column>
                </template>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
            @close="cancelClick"
        >
            <div slot="title">客户标签导入</div>
            <input type="file" ref="input" id="fileupload" @input="upload" />
            <a @click="downloadFile" class="downloadClass">点击此处下载模板</a>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="cancelClick"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handleImport"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import { RegConfig } from '@/utils/RegConfig';
import request from '@/apis/request';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'CustlabelManagement',
    components: {
        Pagination,
    },
    data() {
        return {
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            Show: false,
            files: {},
            formData: {
                custId: '',
            },
            tableHead: [
                { label: '创建时间', prop: 'insertDate', flag: true },
                { label: '客户证件号', prop: 'custId', flag: true },
                { label: '是否绑定微信', prop: 'labelChat', flag: true },
                { label: '银行号', prop: 'bankNum', flag: false },
                { label: '是否绑定APP', prop: 'labelApp', flag: true },
                { label: '是否关联还款', prop: 'labelRepayment', flag: true },
                { label: '是否开通普惠金消费', prop: 'consumePhj', flag: true },
                { label: '领取开卡礼时间', prop: 'cardgiftData', flag: true },
                { label: '用卡持续时间（s）', prop: 'usecardData', flag: true },
                { label: '累计使用额度', prop: 'uselimitSum', flag: true },
                { label: '调额记录', prop: 'adjustlimitRecord', flag: true },
                { label: '累计费用', prop: 'costsum', flag: true },
                { label: '累计利息', prop: 'interestSum', flag: true },
                { label: '分期情况', prop: 'installment', flag: true },
                { label: '二十四个月逾期', prop: 'overdue24', flag: false },
                { label: '十二个月逾期', prop: 'overdue12', flag: false },
                { label: '六个月逾期', prop: 'overdue6', flag: false },
                { label: '近半年致电次数', prop: 'telegramTimes6', flag: false },
                { label: '近1个月致电次数', prop: 'telegramTimes1', flag: false },
                { label: '近一周致电次数', prop: 'telegramTimes', flag: false },
                { label: '投诉情况', prop: 'complaint', flag: true },
                { label: '最近一次调整账单日时间', prop: 'adjustbillData', flag: false },
                { label: '是否有美团卡', prop: 'meituanCard', flag: true },
            ],
            columnDialogFlag: false,
        };
    },
    mounted() {
        this.getInitData(this.formData);
    },
    methods: {
        // 获取用户表格数据
        getInitData(form) {
            let params = {
                bankNum: getTokenHsbankNo('HsbankNo'),
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.Custlabel.searchByPage(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.content.recordList;
                        this.total = res.data.content.recordCount;
                    }
                });
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击重置
        handleReset() {
            this.formData = {
                custId: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 动态列设置
        columnSetting() {
            console.log(1);
            this.columnDialogFlag = !this.columnDialogFlag;
        },
        // 选择要展示的列
        changeChecked(val) {
            return !val.flag;
        },
        // 动态列设置保存
        handleSubmit() {
            this.columnDialogFlag = false;
        },
        upload() {
            this.files = this.$refs.input.files[0];
        },
        // 点击导入
        clickImport() {
            this.Show = true;
        },
        // 导入点击确定按钮
        handleImport() {
            if (!this.files.name) {
                this.$message.warning('请选择需要导入的文件！');
                return;
            }
            const arr = ['xls', 'xlsx', 'csv', 'xltx', 'xml'];
            if (arr.indexOf(this.files.name.split('.')[1]) > -1) {
                const data = new FormData();
                data.append('file', this.files);
                this.$post.Custlabel.batchImport(data)
                    .then((res) => {
                        if (res.data.success) {
                            this.$message.success('导入成功！');
                            const obj = document.getElementById('fileupload');
                            obj.value = '';
                            this.getInitData(this.formData);
                            this.Show = false;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
            } else {
                this.$message.warning('只能导入excel文件！');
            }
        },
        downloadFile() {
            const url = '/iccsrv/custlabel/download';
            request({
                url,
                method: 'get',
                responseType: 'blob',
                params: 'custLabelTemplate.xlsx',
            }).then((res) => {
                // console.log(res, '相应报文')
                const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = 'custLabelTemplate.xlsx';
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        // 取消
        cancelClick() {
            const obj = document.getElementById('fileupload');
            obj.value = '';
            this.Show = false;
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(this.formData);
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData(this.formData);
        },
    },
};
</script>

<style  lang="scss">
.downloadClass {
    margin-left: 18%;
    color: #409eff;
}
.container {
    width: 100%;
    height: 100%;
    .custLabelManageMain {
        position: relative;
        width: 100%;
        background: #fff;
        margin-bottom: 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
        .columnDialog {
            width: 200px;
            z-index: 2;
            padding: 12px;
            background: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
            -moz-box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
            box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
            position: absolute;
            left: 20px;
            top: 120px;
            .dialog-footer {
                margin-top: 12px;
            }
            /deep/ .side-bar-scrollbar-wrap {
                max-height: 600px;
                min-height: 300px;
            }
        }

        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
